Javascript DOM编程艺术读书笔记10

第10章用javascript实现动画效果

css的overflow属性

overflow属性的可取值有4种：visible、hidden、scroll、auto。

visible:不裁剪溢出的内容。内容只显示在其容器元素的显示区域内，这意味着只有一部分内容可见。
hidden:隐藏溢出的内容。内容只显示在其容器元素的显示区域里，这意味着只有一部分内容可见。
scroll：类似于hidden，浏览器将对溢出的内容进行隐藏，但显示一个滚动条以便让用户能够滚动看到内容的其他部分。
auto：类似于scroll,但是浏览器只在确实发生溢出时才显示滚动条，如果内容没有溢出，就不显示滚动条。

position

如果把position属性值是absolute的元素A，放入一个position是relative的元素B，B就成为A的容器元素，A将在B的显示区域里按absolute方式进行摆放。

math函数

Math.ceil(number)将浮点数number向“大于”方向舍入为与之最接近的整数
Math.floor(number)将浮点数number向“小于”方向舍入为与之最接近的整数
Math.round(number)将浮点数number舍入为与之最接近的整数

动画效果

message.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Message</title>

</head>
<body>
<p id="message1">Whee!</p>
<P id="message2">Whoa!</P>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/positionMessage.js"></script>
<script src="scripts/moveElement.js"></script>
</body>
</html>

addLoadEvent.js
moveElement.js

//elementID打算移动的元素id,final_x元素目的地左位置，final_y元素目的地上位置，interval两次移动之间的停顿时间
function moveElement(elementID,final_x,final_y,interval){
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID))return false;
    var elem=document.getElementById(elementID);
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.top);
    if(xpos==final_x&& ypos==final_y) {
        return true;
    }
    //进行位置的移动
    if(xpos<final_x){
        xpos++;
    }
    if(xpos>final_x){
        xpos--;
    }
    if(ypos<final_y){
        ypos++;
    }
    if(ypos>final_y){
        ypos--;
    }
    elem.style.left=xpos+"px";
    elem.style.top=ypos+"px";
    //注意其中的双引号和单引号的格式
    var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    movement=setTimeout(repeat,interval);
}

positionMessage.js

function positionMessage() {
    if (!document.getElementById) return false;
    if (!document.getElementById("message1")) return false;
    var elem = document.getElementById("message1");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    moveElement("message1", 125, 25, 20);
    if (!document.getElementById("message2")) return false;
    var elem = document.getElementById("message2");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "50px";
    moveElement("message2", 125, 125, 20);
}
addLoadEvent(positionMessage);

滑动的效果

鼠标放在链接上，就会滑动到该图片
list.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Web Design</title>
  <style type="text/css" media="screen">
    @import url(styles/layout.css);
  </style>
  <script type="text/javascript" src="scripts/addLoadEvent.js">
  </script>
  <script type="text/javascript" src="scripts/moveElement.js">
  </script>
  <script type="text/javascript" src="scripts/prepareSlideshow.js">
  </script>
  <script type="text/javascript" src="scripts/insertAfter.js"></script>
</head>
<body>
  <h1>Web Design</h1>
  <p>These are the things you should know.</p>
  <ol id="linklist">
    <li>
      <a href="structure.html">Structure</a>
    </li>
    <li>
      <a href="presentation.html">Presentation</a>
    </li>
    <li>
      <a href="behavior.html">Behavior</a>
    </li>
  </ol>
</body>
</html>

addLoadEvent.js
insertAfter.js
moveElement.js

function moveElement(elementID,final_x,final_y,interval) {
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    //每当用户吧鼠标悬停在某个连接上，不管上一次调用是否已经把图片移动到位，moveElement函数都会再次调用并试图把这个函数移动到另一个地方。当用户在链接之间快读移动鼠标时，movement变量会像拔河绳一样来回。
    if (elem.movement) {
        clearTimeout(elem.movement);
    }
    //添加安全检查，如果没有被设置，就设置成0px
    if (!elem.style.left) {
        elem.style.left = "0px";
    }
    if (!elem.style.top) {
        elem.style.top = "0px";
    }
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if (xpos == final_x && ypos == final_y) {
        return true;
    }
    //动画设置越远移动越快，越近移动越慢
    if (xpos < final_x) {
        //math.ceil(number)浮点数number向“大于”方向舍入为最接近的整数
        var dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
    }
    if (xpos > final_x) {
        var dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }
    if (ypos < final_y) {
        var dist = Math.ceil((final_y - ypos)/10);
        ypos = ypos + dist;
    }
    if (ypos > final_y) {
        var dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    //不能使用全局变量，不能使用局部变量，需要一个至于正在被移动的那个元素有关的变量，即将movement设置成属性。
    elem.movement = setTimeout(repeat,interval);
}

prepareSlidershow.js


function prepareSlideshow() {
// 确保浏览器支持DOM方法
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
//确保元素存在
    if (!document.getElementById("linklist")) return false;
//创建并添加元素
    var slideshow = document.createElement("div");
    slideshow.setAttribute("id","slideshow");
    var preview = document.createElement("img");
    preview.setAttribute("src","topics.gif");
    preview.setAttribute("alt","building blocks of web design");
    preview.setAttribute("id","preview");
    slideshow.appendChild(preview);
    var list = document.getElementById("linklist");
    insertAfter(slideshow,list);
// 取得列表中的所有链接
    var links = list.getElementsByTagName("a");
// 为mouseover实践添加动画效果
    links[0].onmouseover = function() {
        moveElement("preview",-100,0,10);
    }
    links[1].onmouseover = function() {
        moveElement("preview",-200,0,10);
    }
    links[2].onmouseover = function() {
        moveElement("preview",-300,0,10);
    }
}
addLoadEvent(prepareSlideshow);

layout.css

#slideshow {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
#preview {
  position: absolute;
}

第10章 用javascript实现动画效果